<template>
	<div>
		<div class="dialog-wrap">
			<div class="dialog-cover" v-if="isShow"></div>
			<div class="dialog-content" v-if="isShow">
				<slot>empty</slot>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {

    }
  },
  methods: {

  }
}
</script>

<style scoped>
	.dialog-wrap {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 100;
	}

	.dialog-cover {
		background: #000;
		opacity: .3;
		position: fixed;
		z-index: 5;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.dialog-content {
		background-color: #ffffff;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		border-radius: 1px;
		background: white;
		z-index: 100;
	}

	.dialog-close {
		position: absolute;
		right: 5px;
		top: 5px;
		width: 20px;
		height: 20px;
		text-align: center;
		cursor: pointer;
	}

	.dialog-close:hover {
		color: #4fc08d;
	}
</style>
